<template>
	<div class="swiper">
		<swiper 
			ref="mySwiper" 
			v-bind:options="swiperOptions" 
			v-if="showSwiper">
		    <swiper-slide 
		    	v-for="item of swiperList" 
		    	v-bind:key="item.id">
        		<img 
        			class="swiper-img" 
        			v-bind:src="item.imgUrl" />
      		</swiper-slide>
      		<div class="swiper-pagination"  slot="pagination"></div>
		</swiper>
	</div>
</template>

<script type="text/javascript">
	// list:[{
	//     "id": "0001",
	//     "imgUrl": "http://img1.qunarzz.com/piao/fusion/1801/1a/94428c6dea109402.jpg_640x200_2cf590d8.jpg"
	// },{
	//     "id": "0002",
	//     "imgUrl": "http://img1.qunarzz.com/piao/fusion/1802/42/7c92b9a381e46402.jpg_640x200_1cdce2a4.jpg"
	// },{
	//     "id": "0003",
	//     "imgUrl": "http://img1.qunarzz.com/piao/fusion/1802/51/e78f936a5b404102.jpg_640x200_c14f0b3a.jpg"
	// },{
	//     "id": "0004",
	//     "imgUrl": "http://img1.qunarzz.com/piao/fusion/1712/91/a275569091681d02.jpg_640x200_0519ccb9.jpg"
	// }]   

	export default {
    	name: 'carrousel',
    	props: {
    		swiperList: Array
  		},
    	data () {
      		return {
        		swiperOptions: {
        	  		pagination: {
            			el: '.swiper-pagination'
          			},
          			autoplay: {
		                delay: 3000,//秒
		                stopOnLastSlide: false,
		                disableOnInteraction: false,//滑动不会失效
              		},
              		loop: true
        		}    
      		}
    	},
	    computed:{
	      	swiper() {
	        	/**
	        	 *	这个名称起成这个有点误解，该属性的值引用了当前组件上$swiper属性，其本质是返回当前录播组件的实例，
	        	 *		但他不是this,他是this.getCurrentSwiper(),也就是我们通过swiperOptions实例的Swiper组件的实例.
	        	 *		这里是ref最有价值用法：获取当前组件的实例
	        	 *	
	        	 *		这段代码有swipe vue版提供。
	        	 */	        	
	        	return this.$refs.mySwiper.$swiper
	      	},
	      	showSwiper(){    
	      		return this.swiperList.length>1;
	      	}
	    },
	    mounted() {	    	
	      	//this.swiper.slideTo(2, 1000, false);   //进一步开发，数据从父组件传递，这个时候swiper实例才是完全实例   	
	    },
	    updated(){
	    	this.swiper.slideTo(2, 1000, false);
	    }
	}
</script>

<style type="text/css" scoped>
	/**
	 *	.wrapper >>> .swiper-pagination-bullet-active
     *		background: #fff
     * 		这个是老师写的stylus语法，他是穿通本地scoped的限制，使得我们可以去冲突swiper组件中的css
     *		
     *      less的写法与这个稍有不同，纯css写法上不太方便，网友的建议解决办法是写两段，一段css不适用scoped注释
	 */
	.swiper >>> .swiper-pagination-bullet-active{
		background-color: #fff;
	}
	.swiper{
		width: 100%;height: 0;overflow: hidden;padding-bottom: 31.25%;background-color: #eee;
	}
	.swiper-img{
		width:100%;
  	}
</style>